﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="author" content="Cheresting" />
  <title>驱动器周计划</title>

  <!-- 样式优先加载 -->
  <link rel="stylesheet" href="./publicJs/element-plus.index.css" />
  <link rel="stylesheet" href="./publicJs/vxe/ui.style.min.css" />
  <link rel="stylesheet" href="./publicJs/vxe/table.style.min.css" />

  <!-- 基础库 -->
  <script src="./publicJs/dayjs.min.js"></script>
  <script src="./publicJs/vue.global.prod.js"></script>
  <script src="./publicJs/axios.min.js"></script>
  <script src="./publicJs/js.cookie.min.js"></script>
  <script src="./publicJs/xlsx.core.min.js"></script>

  <!-- Element Plus -->
  <script src="./publicJs/element-plus.index.full.js"></script>
  <script src="./publicJs/index.iife.min.js"></script>

  <!-- Vxe Table v4 -->
  <script src="./publicJs/vxe/xe-utils.umd.min.js"></script>
  <script src="./publicJs/vxe/ui.index.umd.min.js"></script>
  <script src="./publicJs/vxe/table.index.umd.min.js"></script>
</head>

<body>
  <div id="app">
    <div>
      <vxe-modal v-model="form1Vsion" :width="700" :height="600" title="添加订单">

        <vxe-toolbar ref="toolbarRef1">
          <template #buttons>
            <vxe-button @click="importEvent1" status="primary" icon="vxe-icon-upload">导入 Excel</vxe-button>
            <vxe-button @click="" status="success" icon="vxe-icon-refresh">刷新数据</vxe-button>
            <vxe-button content="导入Excel" round></vxe-button>
            <vxe-button status="error" @click="removeSelectEvent">批量删除</vxe-button>
          </template>
        </vxe-toolbar>
        <vxe-table :export-config="{}" :loading="loading1" keep-source ref="FSWLRef" :edit-config="editConfig"
          :row-config="{isHover: true}" :checkbox-config="{ highlight: true}" border height="480"
          :column-config="{resizable: true}" :virtual-y-config="{enabled: true, gt: 0}" :data="tData1">
          <vxe-column type="seq" title="序号" width="50"></vxe-column>
          <vxe-column type="checkbox" width="50"></vxe-column>
          <vxe-column field="METCODE" title="子物料" :edit-render="{name: 'VxeInput'}"></vxe-column>
          <vxe-column field="F_METCODE" title="父物料" :edit-render="{name: 'VxeInput'}"></vxe-column>
          <vxe-column title="操作" width="160">
            <template #default="{ row }">
              <template v-if="hasEditStatus1(row)">
                <vxe-button @click="saveRowEvent1(row)">保存</vxe-button>
                <vxe-button @click="cancelRowEvent1(row)">取消</vxe-button>
              </template>
              <template v-else>
                <vxe-button @click="editRowEvent1(row)">编辑</vxe-button>
              </template>
            </template>
          </vxe-column>
        </vxe-table>

      </vxe-modal>
      <vxe-modal v-model="form2Vsion" :width="1000" :height="600" title="金属物料号维护">
        <vxe-row gutter="5">
          <vxe-col span="14">
            <div style="margin-bottom: 5px;">
              <vxe-tag>增加或修改</vxe-tag>
            </div>
            <vxe-table :loading="loading2" keep-source ref="JSWLRef" :edit-config="editConfig"
              :row-config="{isHover: true}" border height="480" :column-config="{resizable: true}"
              :virtual-y-config="{enabled: true, gt: 0}" :data="tData2">
              <vxe-column type="seq" title="序号" width="50"></vxe-column>
              <vxe-column field="JINGSHU_MATCODE" title="金属物料号" :edit-render="{name: 'VxeInput'}"></vxe-column>
              <vxe-column field="MATCODE" title="物料号" :edit-render="{name: 'VxeInput'}"></vxe-column>
              <vxe-column field="NNUMBER" title="对应数量"
                :edit-render="{name: 'VxeInput', props: { type: 'integer' }}"></vxe-column>
              <vxe-column title="操作" width="160">
                <template #default="{ row }">
                  <template v-if="hasEditStatus2(row)">
                    <vxe-button @click="saveRowEvent2(row)">保存</vxe-button>
                    <vxe-button @click="cancelRowEvent2(row)">取消</vxe-button>
                  </template>
                  <template v-else>
                    <vxe-button @click="editRowEvent2(row)">编辑</vxe-button>
                  </template>
                </template>
              </vxe-column>
            </vxe-table>
          </vxe-col>
          <vxe-col span="10">
            <vxe-button content="导入Excel" round></vxe-button>
            <vxe-form :vertical="true" ref="formRef" :data="formData2" @submit="submitEvent1" @reset="resetEvent">
              <vxe-form-item title="输入金属物料号" field="JINGSHU_MATCODE" span="24" :item-render="{}">
                <template #default="params">
                  <vxe-input v-model="formData2.JINGSHU_MATCODE"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="输入对应的物料号" field="MATCODE" span="24" :item-render="{}">
                <template #default="params">
                  <vxe-input v-model="formData2.MATCODE"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="输入对应数量" field="NNUMBER" span="24" :item-render="{}">
                <template #default="params">
                  <vxe-number-input v-model="formData2.NNUMBER" placeholder="请输入" min="1"></vxe-number-input>
                </template>
              </vxe-form-item>
              <vxe-form-item align="center" span="24" :item-render="{}">
                <template #default>
                  <vxe-button type="submit" status="primary" content="提交"></vxe-button>
                  <vxe-button type="reset" content="重置"></vxe-button>
                </template>
              </vxe-form-item>
            </vxe-form>
          </vxe-col>
        </vxe-row>

      </vxe-modal>

      <vxe-modal v-model="form3Vsion" :width="1000" :height="600" title="精工物料号维护">
        <vxe-row gutter="5">
          <vxe-col span="14">
            <div style="margin-bottom: 5px;">
              <vxe-tag>增加或修改</vxe-tag>
            </div>
            <vxe-table :loading="loading3" keep-source ref="JGWLRef" :edit-config="editConfig"
              :row-config="{isHover: true}" border height="480" :column-config="{resizable: true}"
              :virtual-y-config="{enabled: true, gt: 0}" :data="tData3">
              <vxe-column type="seq" title="序号" width="50"></vxe-column>
              <vxe-column field="JINGGONG_MATCODE" title="精工物料号" :edit-render="{name: 'VxeInput'}"></vxe-column>
              <vxe-column field=" MATCODE" title="物料号" :edit-render="{name: 'VxeInput'}"></vxe-column>
              <vxe-column field=" NNUMBER" title="对应数量"
                :edit-render="{name: 'VxeInput', props: { type: 'integer' }}"></vxe-column>
              <vxe-column title="操作" width="160">
                <template #default="{ row }">
                  <template v-if="hasEditStatus3(row)">
                    <vxe-button @click="saveRowEvent3(row)">保存</vxe-button>
                    <vxe-button @click="cancelRowEvent3(row)">取消</vxe-button>
                  </template>
                  <template v-else>
                    <vxe-button @click="editRowEvent3(row)">编辑</vxe-button>
                  </template>
                </template>
              </vxe-column>
            </vxe-table>
          </vxe-col>
          <vxe-col span="10">
            <vxe-button content="导入Excel" round></vxe-button>
            <vxe-form :vertical="true" ref="formRef" :data="formData3" @submit="submitEvent2" @reset="resetEvent">
              <vxe-form-item title="输入精工物料号" field="JINGGONG_MATCODE" span="24" :item-render="{}">
                <template #default="params">
                  <vxe-input v-model="formData3.JINGGONG_MATCODE"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="输入对应的物料号" field="MATCODE" span="24" :item-render="{}">
                <template #default="params">
                  <vxe-input v-model="formData3.MATCODE"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="输入对应数量" field="NNUMBER" span="24" :item-render="{}">
                <template #default="params">
                  <vxe-number-input v-model="formData3.NNUMBER" placeholder="请输入" min="1"></vxe-number-input>
                </template>
              </vxe-form-item>
              <vxe-form-item align="center" span="24" :item-render="{}">
                <template #default>
                  <vxe-button type="submit" status="primary" content="提交"></vxe-button>
                  <vxe-button type="reset" content="重置"></vxe-button>
                </template>
              </vxe-form-item>
            </vxe-form>
          </vxe-col>
        </vxe-row>

      </vxe-modal>

      <vxe-modal v-model="form4Vsion" :width="1000" :height="600" title="车间安全库存维护">
        <vxe-row gutter="5">
          <vxe-col span="14">
            <div style="margin-bottom: 5px;">
              <vxe-tag>增加或修改</vxe-tag>
            </div>
            <vxe-table :loading="loading4" keep-source ref="CJAQRef" :edit-config="editConfig"
              :row-config="{isHover: true}" border height="480" :column-config="{resizable: true}"
              :virtual-y-config="{enabled: true, gt: 0}" :data="tData4">
              <vxe-column type="seq" title="序号" width="50"></vxe-column>
              <vxe-column field="MATNR" title="物料号" :edit-render="{name: 'VxeInput'}"></vxe-column>
              <vxe-column field="SAFE_STOCK_CJ" title="车间安全库存"
                :edit-render="{name: 'VxeInput', props: { type: 'integer' }}"></vxe-column>
              <vxe-column title="操作" width="160">
                <template #default="{ row }">
                  <template v-if="hasEditStatus4(row)">
                    <vxe-button @click="saveRowEvent4(row)">保存</vxe-button>
                    <vxe-button @click="cancelRowEvent4(row)">取消</vxe-button>
                  </template>
                  <template v-else>
                    <vxe-button @click="editRowEvent4(row)">编辑</vxe-button>
                  </template>
                </template>
              </vxe-column>
            </vxe-table>
          </vxe-col>
          <vxe-col span="10">
            <vxe-button content="导入Excel" round></vxe-button>
            <vxe-form :vertical="true" ref="formRef" :data="formData4" @submit="submitEvent2" @reset="resetEvent">
              <vxe-form-item title="输入对应的物料号" field="MATNR" span="24" :item-render="{}">
                <template #default="params">
                  <vxe-input v-model="formData4.MATNR"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="输入对应数量" field="SAFE_STOCK_CJ" span="24" :item-render="{}">
                <template #default="params">
                  <vxe-number-input v-model="formData4.SAFE_STOCK_CJ" placeholder="请输入" min="1"></vxe-number-input>
                </template>
              </vxe-form-item>
              <vxe-form-item align="center" span="24" :item-render="{}">
                <template #default>
                  <vxe-button type="submit" status="primary" content="提交"></vxe-button>
                  <vxe-button type="reset" content="重置"></vxe-button>
                </template>
              </vxe-form-item>
            </vxe-form>
          </vxe-col>
        </vxe-row>

      </vxe-modal>
    </div>
    <div v-loading="loading" style="height: 100vh; display: flex; flex-direction: column">
      <!-- 工具栏 -->
      <div class="marginTop10" style="padding: 10px; display: flex; gap: 00px; align-items: center;margin-top: 0%;">
        <el-button @click="reloadData" :icon="Refresh">刷新数据</el-button>
        <!-- <el-cascader v-model="selectedFilter" filterable style="width: 150px;padding-left: 10px;" :options="option" -->
        <!-- clearable :clear-icon="CloseBold" placeholder="查询"></el-cascader> -->
        <!-- <el-button @click="() => console.log('保存数据')" style="margin-left: 0%;">保存数据</el-button>
        <el-button @click="() => console.log('清除数据')" style="margin-left: 0%;">清除数据</el-button> -->
        <vxe-select style="padding-left: 10px" v-model="selectedFilter" placeholder="物料类型" :options="option" clearable
          multiple></vxe-select>
        <el-dropdown trigger="click" split-button style="padding-left: 10px">
          物料维护
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="WHClick1()">新物料号维护</el-dropdown-item>
              <el-dropdown-item @click="() => {form2Vsion = true;getJSWL();}">金属物料号维护</el-dropdown-item>
              <el-dropdown-item @click="() => {form3Vsion = true;getJGWL();}">精工物料号维护</el-dropdown-item>
              <el-dropdown-item @click="() => {form4Vsion = true;getAQKC();}">车间安全库存维护</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- <el-dropdown style="padding-left: 10px" trigger="click" split-button @click="handleExportAll">
          导出
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleExportAll">导出全部</el-dropdown-item>
              <el-dropdown-item v-for="item in option" :key="item.value" @click="() => handleExportBy(item)">
                导出 {{ item.label }} 周计划
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown> -->
        <!-- <el-button @click="() => console.log('总差异为负')" style="margin-left: 0%;">总差异为负</el-button> -->
        <!-- <el-tag type="info" size="large">总差异为负</el-tag> -->
        <!-- <el-button @click="() => console.log('排产总出仓总差异为负')" style="margin-left: 0%;">排产总出仓总差异为负</el-button> -->
        <!-- <el-tag type="info" size="large">排产总出仓总差异为负</el-tag> -->

        <vxe-checkbox style="padding-left: 20px;" v-model="val1">总差异为负</vxe-checkbox>
        <vxe-checkbox v-model="val2" size="medium">排产总出仓总差异为负</vxe-checkbox>
      </div>
      <div>
        <vxe-toolbar ref="toolbarRef" custom style="padding-top: 0%;padding-left: 10px;padding-right: 10px;" print
          export>
          <template #buttons>
            <!-- 🔍 全局搜索框 -->
            <vxe-input v-model="searchKeyword" type="search" placeholder="全表搜索" clearable
              @change="handleSearch"></vxe-input>
          </template>
        </vxe-toolbar>
      </div>
      <!-- 表格容器 -->
      <div style="flex: 1; padding: 0 10px;">
        <vxe-table id="tableStorage1" :show-overflow="false" :virtual-y-config="{enabled: true, gt: 0}" border
          height="100%" :sort-config="{ trigger: 'cell', multiple: true }" :virtual-scroll="{
            enabled: true,
            scrollY: { gt: 100, size: 30 },
            scrollX: { gt: 50, size: 20 }
          }" :print-config="{}" :export-config="{}" :row-config="rowConfig" :custom-config="customConfig"
          :column-config="columnConfig" :data="filteredTableData" @sort-change="handleSortChange" ref="tableRef">
          <vxe-column type="seq" width="60" title="序号" fixed="left"></vxe-column>
          <vxe-column fixed="left" field="MATNR" title="物料号" width="95" sortable type="html"></vxe-column>
          <vxe-column fixed="left" field="MAKTX" title="描述" width="200" sortable type="html"></vxe-column>
          <vxe-column field="LABST" title="库存" width="70" sortable type="html"></vxe-column>
          <vxe-column field="oriLABST" title="预留" width="70" sortable></vxe-column>
          <vxe-column field="DRK" title="待入库" width="85" sortable></vxe-column>
          <vxe-column field="RSMNG" title="未清采购" width="100" sortable></vxe-column>
          <vxe-column field="NOT_FINISHED_COUNT" title="SAP已建订单" width="80" sortable></vxe-column>
          <vxe-column field="PLANED_COUNT" title="MES已排产未完成" width="100" sortable></vxe-column>
          <vxe-column field="OUTCOUNT_SUJI" title="塑机出仓" width="100" sortable></vxe-column>
          <!-- <vxe-column field="OUTCOUNT_JINGSHU" title="金属出仓" width="100" sortable></vxe-column> -->
          <vxe-column field="OUTCOUNT_WAIXIAO" title="外销出仓" width="100" sortable></vxe-column>
          <vxe-column field="OUTCOUNT_SUM" title="总出仓" width="100" sortable></vxe-column>
          <vxe-column field="DIFFERENCE_BETWEEN_STOCK__OUTCOUNT" title="库存与总出仓差异" width="100" sortable></vxe-column>
          <vxe-column field="DIFFERENCE_BETWEEN_PLANED__OUTCOUNT" title="已排产与总出仓差异" width="100" sortable></vxe-column>
          <vxe-column field="REQUIRE_SUJI" title="塑机总需求" width="110" sortable></vxe-column>
          <vxe-column field="SAFE_STOCK" title="安全库存" width="100" sortable></vxe-column>
          <vxe-column field="SAFE_STOCK_CJ" title="车间安全库存" width="80" sortable></vxe-column>
          <vxe-column field="SUM_DIFFERENCE" title="总差异" width="85" sortable></vxe-column>
          <vxe-column field="WQCG_ALL" title="本周车间已排产" width="100" sortable></vxe-column>
          <vxe-column field="WEEK_RELEASED" title="本周已释放" width="110" sortable></vxe-column>
          <vxe-column field="WEEK_RELEASED_NOT_PLANED" title="已释放未排产" width="100" sortable></vxe-column>
          <vxe-column field="SAP_NOT_CLEAR_COUNT" title="SAP未清销售数量" width="100" sortable></vxe-column>
          <vxe-column field="CLEAR_DIFFERENCE" title="毛差异" width="85" sortable></vxe-column>
          <!-- <vxe-column field="" title="下周需车间排产" width="100" sortable></vxe-column> -->
          <!-- <vxe-column field="NEXT_WEEK_RELEASED" title="下周需释放" width="80" sortable></vxe-column> -->
          <vxe-column field="AVG_MONTH" title="季月均" width="85" sortable></vxe-column>
          <vxe-column field="DIFFERENCE_BETWEEN_REQUIRE_MONTH" title="月发货量" width="100" sortable></vxe-column>
          <!-- <vxe-column field="MONTH_PLAN" title="月计划" width="85" sortable></vxe-column> -->
          <!-- <vxe-column field="REMARK" title="备注" width="80" sortable></vxe-column> -->
          <!-- <vxe-column field="EMERGENCY_SHORTAGE" title="紧急欠缺" width="100" sortable></vxe-column> -->

          <!-- <vxe-column field="createTime" title="" width="80" sortable>
            <template #default="{ row }">
              {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </vxe-column> -->
        </vxe-table>
      </div>
    </div>
  </div>
</body>

<script type="module">
  import useMyXlsx from './hooks/useMyXlsx.js'
  let myXlsx = useMyXlsx()
  import myAxios from './myAxios/myAxios.js'
  import myAxiosWXPost from './myAxios/myAxiosWXPost.js'
  import { showSuccess, showWarning } from './hooks/useMyMessageBox.js'

  const { createApp, ref, computed, onMounted, reactive, nextTick } = Vue
  const { Refresh, Search, CloseBold } = ElementPlusIconsVue
  import { GetMatCodeParamString } from './QDQZJH_JS/getMatCodeParamString.js'
  import { GetDataList2 } from './QDQZJH_JS/GetDataList2.js'


  const app = createApp({
    setup() {
      const loading = ref(false)
      const searchKeyword = ref('')
      const originalData = ref([]) // 存原始数据
      const tableData = ref([])    // 响应式数据（用于排序）

      const SelectBox = ref([])
      const option = ref([])
      const toolbarRef = ref();
      const toolbarRef1 = ref();
      const toolbarRef2 = ref();
      const toolbarRef3 = ref();
      const toolbarRef4 = ref();
      const tableRef = ref();
      const FSWLRef = ref();
      const JSWLRef = ref();
      const JGWLRef = ref();
      const CJAQRef = ref();
      const editConfig = ref({
        trigger: 'manual',
        mode: 'row',
        showStatus: true,
        autoClear: false
      })
      let getSelectBox = function () {
        let params = ''
        let name = '丁允鑫驱动器周计划下拉框查询'
        myAxios
          .get(name, params, 'Q902')
          .then((res) => {
            if (res instanceof Array) {
              SelectBox.value = res;
              option.value = res.map(item => ({ value: item.CODE, label: item.NAME, MATTYPE: item.CODE }))
              // console.log("SelectBox", SelectBox);
              // console.log("opitons", option.value);

            } else {
              showWarning('获取数据失败res!' + res)
            }

          })
          .catch((err) => {

            showWarning('获取数据失败err!' + err)
          })
      }
      getSelectBox()

      //获取数据
      let getTableData = async () => {

        let obj = await GetMatCodeParamString()
        // console.log('obj :>> ', obj)
        let result = await GetDataList2(obj.metCodeParamString)
        originalData.value = result
        tableData.value = [...result]
        // console.log('result :>> ', result)

      }



      const reloadData = async () => {
        loading.value = true;
        await getTableData();

        loading.value = false;

      }
      // 🔍 搜索过滤,高亮
      const filteredTableData = computed(() => {
        let rs = [...originalData.value]
        let arr = []
        // 1. cascader 筛选 MATTYPE
        if (selectedFilter.value && selectedFilter.value.length) {

          rs = rs.filter(item => selectedFilter.value.includes(item.MATTYPE))
        }

        if (val1.value) {
          rs = rs.filter(item => item.SUM_DIFFERENCE < 0)
        }

        if (val2.value) {
          rs = rs.filter(item => item.DIFFERENCE_BETWEEN_PLANED__OUTCOUNT < 0)
        }


        const kw = searchKeyword.value.trim().toLowerCase()
        if (!kw) return rs.map(row => ({ ...row }))

        const regex = new RegExp(`(${kw})`, 'gi')
        const fields = ['MATNR', 'MAKTX']

        return rs
          .filter(row =>
            fields.some(f => String(row[f]).toLowerCase().includes(kw))
          )
          .map(row => {
            const newRow = { ...row }
            fields.forEach(f => {
              if (newRow[f]) {
                newRow[f] = String(newRow[f]).replace(regex, '<span class="keyword-highlight">$1</span>')
              }
            })
            return newRow
          })
      })

      const handleSearch = () => {
        // console.log('搜索关键词:', searchKeyword.value)
      }


      const handleSortChange = ({ property, order }) => {
        if (!property || !order) {
          tableData.value = [...originalData.value]
          return
        }

        const isAsc = order === 'asc'
        tableData.value = [...tableData.value].sort((a, b) => {
          const val1 = a[property]
          const val2 = b[property]
          if (typeof val1 === 'string') {
            return isAsc ? val1.localeCompare(val2) : val2.localeCompare(val1)
          }
          return isAsc ? val1 - val2 : val2 - val1
        })
      }
      const select1 = ref('');
      let ExportOption_bomSum = {
        titles: {
          '': '',
          '': '',
          '': '',
        },
        header: ['', '', ''],
        // hideColumns: ['']
      };






      const customConfig = reactive({
        storage: true,

      })
      const columnConfig = reactive({
        drag: true,
        useKey: true,
        resizable: true
      })
      const rowConfig = reactive({

        useKey: true,

      })


      onMounted(() => {

        reloadData();

        const $table = tableRef.value
        const $toolbar = toolbarRef.value
        if ($table && $toolbar) {
          $table.connect($toolbar)
        }

      })
      const WHClick1 = async function () {
        form1Vsion.value = true;
        getSFWL();
        await nextTick()
        try {
          const $table1 = FSWLRef.value
          const $toolbar1 = toolbarRef1.value
          if ($table1 && $toolbar1) {
            $table1.connect($toolbar1)
            // console.log('🔗 副表工具栏已连接')
          }
        } catch (err) {
          console.error(err)
        } finally {
          loading1.value = false
        }



      }
      const WHClick2 = async function () {
        form2Vsion = true; getJSWL();
      }
      const WHClick3 = async function () {
        form3Vsion = true; getJGWL();
      }
      const WHClick4 = async function () {
        form4Vsion = true; getAQKC();
      }
      const selectedFilter = ref([]);
      const val1 = ref(false);
      const val2 = ref(false);
      const form1Vsion = ref(false);
      const form2Vsion = ref(false);
      const form3Vsion = ref(false);
      const form4Vsion = ref(false);
      const formRef = ref()
      const tData1 = ref([{
        METCODE: '',
        F_METCODE: '',

      }])

      const tData2 = ref([{
        JINGSHU_MATCODE: '',
        MATCODE: '',
        NNUMBER: '',
      }])
      const tData3 = ref([{
        JINGGONG_MATCODE: '',
        MATCODE: '',
        NNUMBER: '',
      }])
      const tData4 = ref([{
        MATNR: '',
        SAFE_STOCK_CJ: '',
      }])
      const formData1 = ref({
        METCODE: '',
        F_METCODE: '',
      })
      const formData2 = ref({
        JINGSHU_MATCODE: '',
        MATCODE: '',
        NNUMBER: '',
      })
      const formData3 = ref({
        JINGGONG_MATCODE: '',
        MATCODE: '',
        NNUMBER: '',
      })
      const formData4 = ref({
        MATNR: '',
        SAFE_STOCK_CJ: '',
      })
      const submitEvent1 = function (data) {
        // if (!data.JINGSHU_MATCODE || !data.MATCODE || data.NNUMBER) {
        //   showWarning('请输入完整信息')
        //   return
        // }
        // let params = `${data.JINGSHU_MATCODE}🈹${data.MATCODE}🈹${data.NNUMBER}`
        // let name = ''
        // myAxios
        //   .post(name, params, 'Q902')
        //   .then((res) => {
        //     if (res) {
        //       console.log("res>>", res)
        //     } else {
        //       showWarning('插入数据失败res!' + res)
        //     }

        //   })
        //   .catch((err) => {

        //     showWarning('插入数据失败err!' + err)
        //   })

        form2Vsion.value = false;
        // console.log("提交")

      }
      const submitEvent2 = function (data) {
        // if (!data.JINGGONG_MATCODE || !data.MATCODE || data.NNUMBER) {
        //   showWarning('请输入完整信息')
        //   return
        // }
        // let params = `${data.JINGGONG_MATCODE}🈹${data.MATCODE}🈹${data.NNUMBER}`
        // let name = ''
        // myAxios
        //   .post(name, params, 'Q902')
        //   .then((res) => {
        //     if (res) {
        //       console.log("res>>", res)
        //     } else {
        //       showWarning('插入数据失败res!' + res)
        //     }

        //   })
        //   .catch((err) => {

        //     showWarning('插入数据失败err!' + err)
        //   })


        form3Vsion.value = false;
        // console.log("提交")

      }
      const submitEvent3 = function () {
        // if (!data.MATNR || !data.SAFE_STOCK_CJ) {
        //   showWarning('请输入完整信息')
        //   return
        // }
        // let params = `${data.MATNR}🈹${data.SAFE_STOCK_CJ}`
        // let name = ''
        // myAxios
        //   .post(name, params, 'Q902')
        //   .then((res) => {
        //     if (res) {
        //       console.log("res>>", res)
        //     } else {
        //       showWarning('插入数据失败res!' + res)
        //     }

        //   })
        //   .catch((err) => {

        //     showWarning('插入数据失败err!' + err)
        //   })

        form4Vsion.value = false;
        // console.log("提交")

      }
      const resetEvent = function () {
        // console.log("表单已重置")

      }

      let getSFWL = function () {
        loading1.value = true
        let params = ''
        let name = '丁允鑫驱动器周计划添加物料查询'
        myAxios
          .get(name, params, 'Q902')
          .then((res) => {
            if (res instanceof Array) {
              tData1.value = res;

              // console.log(tData1);
            } else {
              showWarning('获取数据失败res!' + res)

            }

          })
          .catch((err) => {

            showWarning('获取数据失败err!' + err)
          })
        loading1.value = false;
      }
      let getJSWL = function () {
        loading2.value = true;
        let params = ''
        let name = '丁允鑫驱动器周计划金属物料查询'
        myAxios
          .get(name, params, 'Q902')
          .then((res) => {
            if (res instanceof Array) {
              tData2.value = res;
              // console.log(tData2);
            } else {
              showWarning('获取数据失败res!' + res)
            }

          })
          .catch((err) => {

            showWarning('获取数据失败err!' + err)
          })
        loading2.value = false;
      }
      let getJGWL = function () {
        loading3.value = true;
        let params = ''
        let name = '丁允鑫驱动器周计划精工物料查询'
        myAxios
          .get(name, params, 'Q902')
          .then((res) => {
            if (res instanceof Array) {
              tData3.value = res;
              // console.log(tData3);
            } else {
              showWarning('获取数据失败res!' + res)
            }

          })
          .catch((err) => {

            showWarning('获取数据失败err!' + err)
          })
        loading3.value = false;
      }
      let getAQKC = function () {
        loading4.value = true;
        let params = ''
        let name = '丁允鑫驱动器周计划安全库存查询'
        myAxios
          .get(name, params, 'Q902')
          .then((res) => {
            if (res instanceof Array) {
              tData4.value = res;
              // console.log(tData4);
            } else {
              showWarning('获取数据失败res!' + res)
            }

          })
          .catch((err) => {

            showWarning('获取数据失败err!' + err)
          })
        loading4.value = false;
      }
      const loading1 = ref(false);
      const loading2 = ref(false);
      const loading3 = ref(false);
      const loading4 = ref(false);
      const hasEditStatus1 = (row) => {
        const $table = FSWLRef.value
        if ($table) {
          return $table.isEditByRow(row)
        }
      }
      const hasEditStatus2 = (row) => {
        const $table = JSWLRef.value
        if ($table) {
          return $table.isEditByRow(row)
        }
      }
      const hasEditStatus3 = (row) => {
        const $table = JGWLRef.value
        if ($table) {
          return $table.isEditByRow(row)
        }
      }
      const hasEditStatus4 = (row) => {
        const $table = CJAQRef.value
        if ($table) {
          return $table.isEditByRow(row)
        }
      }
      const editRowEvent1 = (row) => {
        const $table = FSWLRef.value
        if ($table) {
          $table.setEditRow(row)
        }
      }
      const editRowEvent2 = (row) => {
        const $table = JSWLRef.value
        if ($table) {
          $table.setEditRow(row)
        }
      }
      const editRowEvent3 = (row) => {
        const $table = JGWLRef.value
        if ($table) {
          $table.setEditRow(row)
        }
      }
      const editRowEvent4 = (row) => {
        const $table = CJAQRef.value
        if ($table) {
          $table.setEditRow(row)
        }
      }
      const saveRowEvent1 = (row) => {
        const $table = FSWLRef.value
        if ($table) {
          $table.clearEdit().then(() => {
            loading1.value = true
            //处理数据
            // let params = `${row.METCODE}🈹${row.F_METCODE}`
            // let name = ''
            // myAxios
            //   .post(name, params, 'Q902')
            //   .then((res) => {
            //     if (res) {
            //       getSFWL();
            //       console.log("res>>", res)
            //     } else {
            //       showWarning('更新数据失败res!' + res)
            //     }

            //   })
            //   .catch((err) => {

            //     showWarning('更新数据失败err!' + err)
            //   })
          })
        }
      }
      const saveRowEvent2 = (row) => {
        const $table = JSWLRef.value
        if ($table) {
          $table.clearEdit().then(() => {
            loading2.value = true
            //处理数据
            // let params = `${row.JINGSHU_MATCODE}🈹${row.MATCODE}🈹${row.NNUMBER}`
            // let name = ''
            // myAxios
            //   .post(name, params, 'Q902')
            //   .then((res) => {
            //     if (res) {
            //       getJSWL();
            //       console.log("res>>", res)
            //     } else {
            //       showWarning('更新数据失败res!' + res)
            //     }

            //   })
            //   .catch((err) => {

            //     showWarning('更新数据失败err!' + err)
            //   })
          })
        }
      }
      const saveRowEvent3 = (row) => {
        const $table = JGWLRef.value
        if ($table) {
          $table.clearEdit().then(() => {
            loading3.value = true
            //处理数据
            // let params = `${row.JINGGONG_MATCODE}🈹${row.MATCODE}🈹${row.NNUMBER}`
            // let name = ''
            // myAxios
            //   .post(name, params, 'Q902')
            //   .then((res) => {
            //     if (res) {
            //       getJGWL();
            //       console.log("res>>", res)
            //     } else {
            //       showWarning('更新数据失败res!' + res)
            //     }

            //   })
            //   .catch((err) => {

            //     showWarning('更新数据失败err!' + err)
            //   })
          })
        }
      }
      const saveRowEvent4 = (row) => {
        const $table = CJAQRef.value
        if ($table) {
          $table.clearEdit().then(() => {
            loading4.value = true
            //处理数据
            // let params = `${row.MATNR}🈹${row.SAFE_STOCK_CJ}`
            // let name = ''
            // myAxios
            //   .post(name, params, 'Q902')
            //   .then((res) => {
            //     if (res) {
            //       getAQKC();
            //       console.log("res>>", res)
            //     } else {
            //       showWarning('更新数据失败res!' + res)
            //     }

            //   })
            //   .catch((err) => {

            //     showWarning('更新数据失败err!' + err)
            //   })
          })
        }
      }
      const cancelRowEvent1 = (row) => {
        const $table = FSWLRef.value
        if ($table) {
          $table.clearEdit().then(() => {
            $table.revertData(row)
          })
        }
      }
      const cancelRowEvent2 = (row) => {
        const $table = JSWLRef.value
        if ($table) {
          $table.clearEdit().then(() => {
            $table.revertData(row)
          })
        }
      }
      const cancelRowEvent3 = (row) => {
        const $table = JGWLRef.value
        if ($table) {
          $table.clearEdit().then(() => {
            $table.revertData(row)
          })
        }
      }
      const cancelRowEvent4 = (row) => {
        const $table = CJAQRef.value
        if ($table) {
          $table.clearEdit().then(() => {
            $table.revertData(row)
          })
        }
      }
      const removeSelectEvent = async () => {
        const $table = FSWLRef.value
        if ($table) {
          const selectRecords = $table.getCheckboxRecords()
          if (selectRecords.length > 0) {
            const delIds = []
            const removeRecords = []
            XEUtils.eachTree(selectRecords, item => {
              if (!removeRecords.some(obj => item.id === obj.id)) {
                delIds.push(item.id)
                removeRecords.push(item)
              }
            }, { children: 'children' })
            tData1.value.filter(item => !delIds.includes(item.id))
            VxeUI.modal.message({
              content: '已删除选中',
              status: 'success'
            })
          } else {
            VxeUI.modal.message({
              content: '未选择数据',
              status: 'info'
            })
          }
        }
      }
      const importEvent1 = () => {
        const $table = tableRef.value
        if ($table) {
          $table.openImport({
            modes: ['list'],
            beforeImport: ({ file }) => {

              handleImport(file)
              return false
            }
          })
        }
      }
      const handleImport = (file) => {
        loading.value = true
        const reader = new FileReader()

        reader.onload = async (e) => {
          try {
            const data = new Uint8Array(e.target.result)
            const workbook = XLSX.read(data, { type: 'array' })
            const firstSheet = workbook.Sheets[workbook.SheetNames[0]]
            const jsonData = XLSX.utils.sheet_to_json(firstSheet)

            if (jsonData.length === 0) {
              VXETable.modal.message('Excel 中无有效数据', { status: 'warning' })
              return
            }


            const importData = []
            const errors = []

            jsonData.forEach((row, index) => {
              const JINGSHU_MATCODE = (row['金属物料号'] || row['JINGSHU_MATCODE'] || '').toString().trim()
              const MATCODE = (row['物料号'] || row['MATCODE'] || '').toString().trim()
              const NNUMBER = (row['对应数量'] || row['NNUMBER'] || '').toString().trim()

              // if (!materialNo || !projectNo) {
              //   errors.push(`第 ${index + 2} 行：物料号或项目号为空`)
              //   return
              // }

              importData.push({
                materialNo,
                materialName,
                projectNo,
                result: '待上传'
              })
            })

            // 显示错误
            if (errors.length > 0) {
              VXETable.modal.message(errors.join('<br>'), { status: 'warning', duration: 5000 })
            }

            if (importData.length === 0) return

            //  显示导入的数据
            tData2.value = importData

            //  询问是否立即提交？
            const type = await VXETable.modal.confirm('是否立即提交到服务器？')
            if (type === 'confirm') {
              await submitToServer(importData)
              getAQKC() // 刷新数据
            }
          } catch (err) {
            VXETable.modal.message('解析 Excel 失败，请检查格式', { status: 'error' })
            console.error('Excel 解析错误:', err)
          } finally {
            loading.value = false
          }
        }

        reader.onerror = () => {
          loading.value = false
          VXETable.modal.message('文件读取失败', { status: 'error' })
        }

        reader.readAsArrayBuffer(file)
      }
      return {
        removeSelectEvent,
        WHClick1, WHClick2, WHClick3, WHClick4,
        importEvent1,
        hasEditStatus1, editRowEvent1, saveRowEvent1, cancelRowEvent1,
        hasEditStatus2, editRowEvent2, saveRowEvent2, cancelRowEvent2,
        hasEditStatus3, editRowEvent3, saveRowEvent3, cancelRowEvent3,
        hasEditStatus4, editRowEvent4, saveRowEvent4, cancelRowEvent4,
        editConfig,
        getSFWL, getJSWL, getAQKC, getJGWL,
        submitEvent1, submitEvent2, submitEvent3,
        resetEvent,
        loading,
        loading1, loading2, loading3, loading4,
        tData1, tData2, tData3, tData4,
        val1, val2,
        formRef,
        formData1, formData2, formData3, formData4,
        form1Vsion, form2Vsion, form3Vsion, form4Vsion,
        tableData, selectedFilter,
        filteredTableData,
        searchKeyword,
        handleSearch,
        handleSortChange,
        reloadData,
        getTableData,
        SelectBox, option,
        Refresh, Search, CloseBold,
        dayjs: window.dayjs,

        toolbarRef, toolbarRef1, toolbarRef2, toolbarRef3, toolbarRef4,
        tableRef, FSWLRef, JSWLRef, JGWLRef, CJAQRef,
        customConfig, columnConfig, rowConfig,
      }
    }
  })

  // 注册组件
  app.use(ElementPlus)
  app.use(VxeUI)
  app.use(VxeUITable)

  app.mount('#app')
</script>

<style>
  body,
  html {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }

  .marginTop10 {
    margin-top: 10px;
  }

  .keyword-highlight {
    background-color: #ffdd57;
    color: #000;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: bold;
  }
</style>

</html>